<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> 小张送水后台管理系统</title>
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">

    <!--Bootstrap固定框架-->
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
    <!--图标库-->
    <link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
    <!--核心样式-->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!--axios 在线-->
    <script src="/axios.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="/highcharts.js"></script>
    <script src="/exporting.js"></script>
    <script src="/oldie.js"></script>
    <script src="/zh_cn.js"></script>
    <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
</head>
<body>

<div id="viewport">

    <!-- Sidebar
    客户列表页面使用th:replace属性替换成主菜单的侧边栏，让代码能够复用
    th:replace="waterMainMenu::sidebar"
    waterMainMenu表示主菜单页面的文件名称
    sidebar表示主菜单页面的片段名称
    -->
    <div id="sidebar" th:replace="waterMainnenu::sidebar">
        <nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">
        </nav>
    </div>
    <!-- Content -->
    <div id="content"/>
    <!--
th:replace="waterMainMenu::navbar"表示将nav标签里面所有的内容替换为主页面的navbar片段
    -->
    <div id="container" style="min-width:400px;height:400px"></div>
    <div class="col-md-12" style="margin-top: 15px">
        <table class="table table-bordered table-hover" border="1px">
            <thead>
            <tr class="success" style="text-align: center">
                <td>序号</td>
                <td>时间</td>
                <td>入账金额</td>
            </tr>
            </thead>
            <tbody>
            <tr th:each="his,in: ${listFinece}"  style="text-align: center">
                <td th:text="${in.index}"></td>
                <td th:text="${his.updateTime_1}"></td>
                <td th:text="${his.addAcount.money}"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <script>

        var fineceTime=new Array();
        var money=new Array();
        axios({
            method:"get",
            url:"/getListFinece",

        }).then(function (resp) {
            for (let i = 0; i < resp.data.length; i++) {
                var chartElement = resp.data[i];
                console.log(resp);
                fineceTime[i] = chartElement.updateTime_1;
                money[i] = parseFloat(chartElement.money);
            }
            console.log(fineceTime)
            console.log(money)
            // JS 代码
            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'line'
                },
                title: {
                    text:" "
                },
                subtitle: {
                    text: '账户统计'
                },
                xAxis: {
                    categories: fineceTime
                },
                yAxis: {
                    title: {
                        text: '金额动态图'
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            // 开启数据标签
                            enabled: true
                        },
                        // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                        enableMouseTracking: false
                    }
                },
                series: [{
                    name: ' ',
                    data: money
                }]
            });
        })

    </script>

</div>
<script src="/jquery.js"></script>"
<script>
    $(document).ready(function (){
        $("#n8").css("background","#FFF");
        $("#n8_1").css("color","#000");
        $("#n8_2").css("color","#000");

    })
</script>
</body>
</html>